<template>
  <div>
    <el-row v-if="isDataLoaded" :gutter="20" class="mgb20">
      <el-col :span="8">
        <el-card shadow="hover" body-class="card-body">
          <el-icon class="card-icon bg1">
            <Notebook/>
          </el-icon>
          <div class="card-content">
            <countup class="card-num color1" :end="totalProject"/>
            <div>项目总数量</div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card shadow="hover" body-class="card-body">
          <el-icon class="card-icon bg2">
            <Folder/>
          </el-icon>
          <div class="card-content">
            <countup class="card-num color2" :end="totalFiles"/>
            <div>文件总数</div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card shadow="hover" body-class="card-body">
          <el-icon class="card-icon bg3">
            <Document/>
          </el-icon>
          <div class="card-content">
            <countup class="card-num color3" :end="totalSentences"/>
            <div>语句总数</div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="20" class="mgb20">
      <el-col :span="24">
        <Projects></Projects>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts" name="dashboard">
import countup from '@/components/countup.vue';
import {registerMap, use} from 'echarts/core';
import {BarChart, LineChart, MapChart, PieChart} from 'echarts/charts';
import {
  GridComponent,
  LegendComponent,
  TitleComponent,
  TooltipComponent,
  VisualMapComponent,
} from 'echarts/components';
import {CanvasRenderer} from 'echarts/renderers';
import chinaMap from '@/utils/china';
import {Document, Folder, Notebook} from "@element-plus/icons-vue";
import Projects from "@/views/system/projects.vue";
import axios from "axios";
import {onMounted, ref} from "vue";

const globalApiUrl = import.meta.env.VITE_API_URL

console.log('Global API URL:', globalApiUrl);

const projectsUrl = globalApiUrl + '/projects';

const totalProject = ref(0) // 项目总数量0
const totalFiles = ref(0)
const totalSentences = ref(0)
// 下拉选项
let options = []
let isDataLoaded = ref(false); // 用于标记数据是否加载完成

const getData = async () => {
  // 向后端请求获取projects
  axios.get(projectsUrl, {
    headers: {
      'Content-Type': 'multipart/form-data',
      'Authorization': 'Bearer ' + localStorage.getItem('access_token')
    },
    params: {
      page: 1,
      size: 1000,
    }
  }).then((response) => {
    // 遍历response.data.data.data，填入options
    console.log(response.data)
    totalProject.value = response.data.data.data.length
    for (let i = 0; i < totalProject.value; i++) {
      options.push({
        value: response.data.data.data[i].id,
        label: response.data.data.data[i].name,
      })
    }
    isDataLoaded.value = true; // 数据加载完成
  })
};

const getTotalCount = async () => {
  // 向后端请求获取数量
  axios.get(globalApiUrl + '/count', {
    headers: {
      'Content-Type': 'multipart/form-data',
      'Authorization': 'Bearer ' + localStorage.getItem('access_token')
    },
  }).then((response) => {
    // 遍历response.data.data.data，填入options
    console.log(response.data)
    totalFiles.value = response.data.data.files
    totalSentences.value = response.data.data.sentences
  })
}


// 页面加载时调用 getData
onMounted(() => {
  getData();
  getTotalCount()
});

use([
  CanvasRenderer,
  BarChart,
  GridComponent,
  LineChart,
  PieChart,
  TooltipComponent,
  LegendComponent,
  TitleComponent,
  VisualMapComponent,
  MapChart,
]);
registerMap('china', chinaMap);
</script>

<style>
.card-body {
  display: flex;
  align-items: center;
  height: 100px;
  padding: 0;
}
</style>
<style scoped>
.card-content {
  flex: 1;
  text-align: center;
  font-size: 14px;
  color: #999;
  padding: 0 20px;
}

.card-num {
  font-size: 30px;
}

.card-icon {
  font-size: 50px;
  width: 100px;
  height: 100px;
  text-align: center;
  line-height: 100px;
  color: #fff;
}

.bg1 {
  background: #2d8cf0;
}

.bg2 {
  background: #64d572;
}

.bg3 {
  background: #f25e43;
}

.bg4 {
  background: #e9a745;
}

.color1 {
  color: #2d8cf0;
}

.color2 {
  color: #64d572;
}

.color3 {
  color: #f25e43;
}

.color4 {
  color: #e9a745;
}

.chart {
  width: 100%;
  height: 400px;
}

.card-header {
  padding-left: 10px;
  margin-bottom: 20px;
}

.card-header-title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 5px;
}

.card-header-desc {
  font-size: 14px;
  color: #999;
}

.timeline-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 16px;
  color: #000;
}

.timeline-time,
.timeline-desc {
  font-size: 12px;
  color: #787878;
}

.rank-item {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.rank-item-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #f2f2f2;
  text-align: center;
  line-height: 40px;
  margin-right: 10px;
}

.rank-item-content {
  flex: 1;
}

.rank-item-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #343434;
  margin-bottom: 10px;
}

.rank-item-desc {
  font-size: 14px;
  color: #999;
}

.map-chart {
  width: 100%;
  height: 350px;
}
</style>
